<template>
  <div class="real-time-panel">
    <div v-if="showTime" class="real-time-box">
      <h3 class="title">{{ title }}</h3>
      <span class="subtitle">更新时间：{{ realTime ? realTime : currentTime }}</span>
      <i class="el-icon-refresh icon" @click="refresh" />
      <i v-if="!isShow" class="el-icon-view icon" @click="isShow = !isShow" />
      <svg-icon style="cursor: pointer" v-else icon-class="close-eye" @click="isShow = !isShow" />
    </div>
    <slot name="warn" />
    <slot name="search" />
    <ul class="real-time-data">
      <template v-for="(tab, index) in tabs">
        <li
          v-show="tab.isShow"
          :key="index"
          class="real-time-data-item"
          :class="tab.path ? 'active' : ''"
          :style="showItemClass ? realTimeItemStyle : tab.itemStyle"
          @click="goToDetail(tab.path)"
        >
          <skeleton :loadSkeletonTime="500">
            <!-- 标题 -->
            <p class="text" :style="{ color: tab.color ? tab.color : '' }">
              {{ tab.baseData ? tab.baseData.label : tab.label }}
            </p>

            <!-- 提示文字 -->
            <p class="prompt">
              <span v-if="tab.prompt && tab.prompt.showLine">-</span>
              <span
                class="prompt-text"
                :style="{ color: tab.prompt && tab.prompt.color ? tab.prompt.color : '' }"
                >{{ tab.prompt && tab.prompt.text }}</span
              >
              <span class="ft-12 ml-5" style="color: #409eff">{{
                tab.prompt && tab.prompt.percentage
              }}</span>
            </p>

            <!-- 总统计数据 -->
            <p
              class="count"
              :style="
                tab.baseData && tab.baseData.style ? tab.baseData.style : tab.style ? tab.style : ''
              "
            >
              {{
                isShow
                  ? '****'
                  : tab.baseData
                  ? tab.baseData.value || tab.baseData.value == 0
                    ? tab.baseData.value
                    : '0'
                  : tab.value || tab.value == 0
                  ? tab.value
                  : '0'
              }}
            </p>

            <!-- 昨日数据 -->
            <p v-if="tab.yesterdayData && tab.yesterdayData.isShow" class="number">
              <span>
                {{ tab.yesterdayData.isUnit ? tab.yesterdayData.isUnit.startText : '昨日' }}：</span
              >

              <!-- 标记符号 -->
              <span v-if="!isShow && tab.yesterdayData.mark && tab.yesterdayData.mark.isShow">{{
                tab.yesterdayData.mark.text
              }}</span>

              <!-- 值 -->
              <span>{{
                isShow
                  ? '****'
                  : tab.yesterdayData.value || tab.yesterdayData.value == 0
                  ? tab.yesterdayData.value
                  : '0'
              }}</span>
              <span>{{ tab.yesterdayData.isUnit ? tab.yesterdayData.isUnit.endText : '' }}</span>
            </p>
          </skeleton>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'RealTimeData',
  props: {
    title: {
      type: String,
      default: '数据总览'
    },
    time: {
      type: String,
      default: ''
    },
    showTime: {
      type: Boolean,
      default: true
    },
    tabs: {
      type: Array,
      default: () => {
        return []
      }
    },
    showItemClass: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isShow: false,
      loading: true,
      realTime: ''
    }
  },
  computed: {
    currentTime() {
      const currentTime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      return this.time ? this.time : currentTime
    },
    realTimeItemStyle() {
      if (this.loading) return ''
      return {
        padding: '10px 20px',
        border: '1px solid #eee'
      }
    }
  },
  watch: {},
  created() {
    this.loadSkeleton()
  },
  methods: {
    refresh() {
      this.$emit('refresh')
      this.realTime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      this.$message.success('刷新成功！')
    },
    goToDetail(path) {
      if (!path) return
      this.$router.push({ path })
    },
    loadSkeleton() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>
<style lang="scss" scoped>
.real-time {
  &-box {
    display: flex;
    align-items: center;
    margin: 15px 0;
    .title {
      font-size: 14px;
    }
    .subtitle {
      font-size: 14px;
      padding-left: 15px;
    }
    .icon {
      width: 18px;
      height: 18px;
      margin: 0 5px;
      cursor: pointer;
    }
  }
  &-data {
    display: flex;
    flex-wrap: wrap;
    &-item {
      display: flex;
      flex-direction: column;
      margin: 0 10px 10px 0;
      border-radius: 5px;
      width: 210px;
      .text {
        font-size: 14px;
        font-weight: bold;
      }
      .prompt {
        height: 20px;
        line-height: 20px;
        &-text {
          font-size: 12px;
        }
      }
      .count {
        font-weight: bold;
        font-size: 30px;
        line-height: 30px;
        margin: 10px 0;
        word-break: break-all;
      }
      .number {
        font-size: 14px;
      }
    }
    .active {
      cursor: pointer;
    }
  }
}
</style>
